<template>
  <div class="loading">
    <template v-if="loading">
      <van-loading class="van-loading" size="24px"></van-loading>
      <span class="text">{{ loadingMsg }}</span>
    </template>
    <template v-if="showOverTip && !loading && !hasMore">
      <span class="text">{{ overMsg }}</span>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    loadingMsg: {
      type: String,
      default: '加载中...'
    },
    overMsg: {
      type: String,
      default: '我是有底线的'
    },
    loading: {
      type: Boolean,
      default: false
    },
    showOverTip: {
      type: Boolean,
      default: true
    },
    hasMore: {
      type: Boolean,
      default: true
    }
  }
}
</script>

<style lang="scss" scoped>
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 50px;
  font-size: 12px;
  color: #bdc0c5;
  text-align: center;
  .text {
    margin-left: 10px;
  }
}
</style>
